<template>
  <el-container>
    <el-header height="80px">
        <el-row class="header">
            <el-col :span="4"><h1>XXX管理系统</h1></el-col>
            <el-col :span="4" :offset="15"><h3>手机号：{{user ? user.phone : ''}}</h3></el-col>
            <el-col :span="1" ><el-button type="primary" icon="el-icon-upload2" circle @click="lg"></el-button></el-col>
        </el-row>
        
    </el-header>
    <el-container>
        <el-aside width="200px">
            <el-menu
      :default-active="$router.history.current.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true">
      <template>

      </template>
      <!-- <el-menu-item v-for="ele in functions" :key="ele.functionId" :index="ele.url">
        <i class="el-icon-menu"></i>
        <span slot="title">{{ele.functionName}}</span>
      </el-menu-item> -->
      <el-menu-item index="/manage/student">
        <i class="el-icon-menu"></i>
        <span slot="title">学生管理</span>
      </el-menu-item>
      <el-menu-item index="/manage/student">
        <i class="el-icon-menu"></i>
        <span slot="title">班级管理</span>
      </el-menu-item>
      <el-menu-item index="/manage/student">
        <i class="el-icon-menu"></i>
        <span slot="title">课程管理</span>
      </el-menu-item>
      
    </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>
</template>

<script>
import {getSession} from '../service'
import {mapState,mapActions} from 'vuex'
import {generateMenus} from '../router'
export default {
    data(){
        return{
            phone:''
        }
    },
    computed:{
        ...mapState(["user","functions"])
    },
    methods:{
        lg(){
            this.logout();
            this.$router.push("/login");
        },
        ...mapActions(["logout"])
    },
    async beforeRouteEnter(to, from, next){   
        let response = await getSession();
        console.log("Response:",response);
        next();
        // console.log("response",response)
        // if(response.status == 2){
        //     // this.$router.push('/login');
        //     next("/login")
        //     // next();
        // }else{
            
        //     await generateMenus();
        //     next({ ...to, replace: true })
        //     // next({...to,replace:true});
        //     // next();
        //     // next(vm => {
        //     //     vm.phone = response.data.phone;
        //     // })
            
        // }
    }
    // async beforeCreate(){
    //     console.log(this.$router)
    //     let response = await getSession();
    //     if(response.status == 2){
    //         this.$router.push('/login');
    //     }else{
    //         this.phone = response.data.phone;
    //     }
        
    // }
}
</script>

<style>
    .el-header{
        background: #2b303b;
        color: white;
        
    }
    .header{
        display: flex;
        align-items: center;
    }
    .el-container,.el-aside,.el-menu{
        height:100%;
    }
</style>